<!-- /components/PriceText/PriceText.vue -->
<template>
  <text class="price-wrapper" :style="{ color: color }">
    <!-- 人民币符号 -->
    <text
      v-if="showSymbol"
      class="price-symbol"
      :style="{ fontSize: symbolSize }"
    >
      {{ symbol }}
    </text>

    <!-- 整数部分 -->
    <text class="price-integer" :style="{ fontSize: integerSize }">
      {{ integerPart }}
    </text>

    <!-- 小数点 + 小数部分 -->
    <text v-if="decimalPart !== '00'" class="price-decimal" :style="{ fontSize: decimalSize }">
      .{{ decimalPart }}
    </text>
  </text>
</template>

<script>
/**
 * 价格文本组件
 * 功能：整数部分大字体，小数部分小字体
 * 示例：¥123.45 → ¥123 .45（字号不同）
 */
export default {
  name: 'PriceText',
  props: {
    // 价格值（支持 number 或 string）
    value: {
      type: [Number, String],
      required: true,
    },
    // 是否显示符号（默认 ¥）
    showSymbol: {
      type: Boolean,
      default: true,
    },
    // 自定义符号（如 $、€）
    symbol: {
      type: String,
      default: '¥',
    },
    // 整数部分字体大小
    integerSize: {
      type: String,
      default: '40rpx',
    },
    // 小数部分字体大小
    decimalSize: {
      type: String,
      default: '32rpx',
    },
    // 符号字体大小（默认跟随整数）
    symbolSize: {
      type: String,
      default: '', // 空则使用 integerSize
    },
    // 颜色
    color: {
      type: String,
      default: '#333',
    },
    // 小数位数
    decimalDigits: {
      type: Number,
      default: 2,
    },
  },
  computed: {
    // 拆分整数和小数部分
    integerPart() {
      const num = parseFloat(this.value) || 0;
      return Math.floor(Math.abs(num)).toString();
    },
    decimalPart() {
      const num = parseFloat(this.value) || 0;
      const decimal = Math.abs(num - Math.floor(num)).toFixed(this.decimalDigits);
      return decimal.substring(2); // 取小数点后两位
    },
  },
};
</script>

<style scoped>
.price-wrapper {
  display: inline-flex;
  align-items: baseline; /* 关键：基线对齐，让大小字体自然对齐 */
  line-height: 1;
}
</style>